<template>
	<view class="content">
		<view class="topBox">
			<uni-icons class="back-icon" type="left" size="36rpx" color="#00CC71" @click="goBack" />
			<text class="topBoxText">挂号信息</text>
		</view>
		<!-- 医院 -->
		<view class="list">
			<view class="listItem">
				<image :src="dataUrl" class="listImg"></image>
				<view class="listRight">
					<view style="font-weight: 600;font-size: 40rpx;">{{dataItem}}</view>
					<view style="display: flex;align-items: center;justify-content: flex-start;">
						<view class="listCategory">
							<view style="margin-right: 20rpx;">{{hospitalData.title}}</view>
							<view>{{datatitle}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 87%; margin: 0 auto;">
			<view class="timeBox">
				<view class="time"></view>
				<text>预约挂号时间</text>
			</view>
			<view class="timeIcon">
				<uni-icons type="calendar" size="36rpx" color="#00CC71" @click="open" style="margin-right: 30rpx;" />
				<uv-datetime-picker ref="datetimePickerRef" v-model="value" mode="date" @confirm="confirm">
				</uv-datetime-picker>
				<text style="font-size: 35rpx;"> {{time}}</text>
			</view>
			<view class="personBox">
				<view class="person"></view>
				<text>就诊人</text>
			</view>
			<view style="border-bottom: 5rpx solid rgb(2, 216, 16);font-size: 35rpx;">
				<uv-input border="bottom"></uv-input>
			</view>
		</view>
		<view class="button" @click="goOrder">
			确认预约
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import dayjs from 'dayjs'
	import { ref } from "vue"
	interface obj {
		address : string
		category : string
		grade : string
		hid : number
		logo : string
		title : string
	}
	//返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	//选择时间
	const value = ref(Number(new Date()));
	const time = ref("")
	// 创建日期选择器的引用
	const datetimePickerRef = ref(null);
	const open = () => {
		datetimePickerRef.value?.open();
	}
	//选择的时间
	const confirm = (e) => {
		time.value = dayjs(e.value).format('YYYY-MM-DD')
	}

	//跳转医生列表
	const goDoctor = (name) => {
		uni.navigateTo({
			url: `/pages/doctor/doctor?name=${name}`
		})
	}

	//跳转预约列表
	const goOrder = () => {
		uni.navigateTo({
			url: "/pages/myBooking/myBooking",
		})
		//添加挂号信息
		uni.request({
			url: "http://localhost:3010/register/add",
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token')
			},
			data: {
				uid: dataUid.value,
				did: dataDid.value,
				yy_time: time.value,
				state: 0,
				create_time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
				update_time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
				hid: dataHid.value,
			},
			success(b) {
				console.log("成功", b)
			},
			fail(err) {
				console.log("错误", err)
			}
		})
	}
	//获取医生姓名
	const dataItem = ref()
	//获取医生科室
	const datatitle = ref()
	//获取医生头像
	const dataUrl = ref()
	//获取入住信息
	const dataUid = ref()
	//获取医院id
	const dataHid = ref()
	//获取医生id
	const dataDid = ref()

	//获取医院信息
	const hospitalData = ref({} as obj)
	onLoad((option) => {
		try {
			// 从本地存储获取医生数据
			const selectedDoctor = uni.getStorageSync('selectedDoctor');
			if (selectedDoctor) {
				dataItem.value = selectedDoctor.name;
				datatitle.value = selectedDoctor.title;
				dataUrl.value = selectedDoctor.avatar || '/static/doctor.png'; // 默认头像
				dataHid.value = selectedDoctor.hid;
				dataDid.value = selectedDoctor.did;
			}
			
			// 获取用户ID，假设已存储在本地
			const userInfo = uni.getStorageSync('userInfo');
			dataUid.value = userInfo?.id || '';
			
			// 安全解析医院数据
			const hospitalStr = uni.getStorageSync("hospital");
			if (hospitalStr) {
				try {
					hospitalData.value = JSON.parse(hospitalStr);
				} catch (e) {
					console.error("解析医院数据失败:", e);
					hospitalData.value = { title: "未知医院" } as obj;
				}
			} else {
				hospitalData.value = { title: "未知医院" } as obj;
			}
			
			time.value = dayjs(new Date()).format('YYYY-MM-DD')
		} catch (error) {
			console.error("页面加载错误:", error);
		}
	})
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		box-sizing: border-box;
		background-color: white;
	}

	.topBox {
		width: 99%;
		margin-left: 0.5%;
		margin-top: 85rpx;
		background-color: white;
		height: 120rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-shadow: 0 5rpx 15rpx rgba(36, 211, 2, 0.8);
	}

	.back-icon {
		margin-right: 50rpx;
		margin-left: 15rpx;
	}

	.topBoxText {
		font-size: 35rpx;
		color: rgb(8, 217, 22);
		font-weight: 600;
	}

	.list {
		width: 87%;
		margin: 40rpx auto;
		overflow-y: auto;
	}

	.listItem {
		width: 96%;
		margin-left: 2%;
		height: 150rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 0 20rpx rgba(26, 250, 41, 0.5);
		margin-top: 20rpx;
	}

	.listImg {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx 30rpx;
		border-radius: 50%;
	}

	.listRight {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-start;
	}

	.listCategory {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
	}

	.timeBox {
		display: flex;
		align-items: center;
		justify-self: flex-start;
		margin-bottom: 50rpx;
	}

	.time {
		width: 10rpx;
		height: 40rpx;
		background-color: rgb(0, 255, 6);
		margin-right: 30rpx;
	}

	.timeIcon {
		margin-bottom: 100rpx;
		border-bottom: 5rpx solid rgb(2, 216, 16);
		display: flex;
		align-items: center;
	}

	.personBox {
		display: flex;
		align-items: center;
		justify-self: flex-start;
		margin-bottom: 30rpx;
	}

	.person {
		width: 10rpx;
		height: 40rpx;
		background-color: rgb(0, 255, 6);
		margin-right: 30rpx;
	}

	.button {
		width: 90%;
		margin: 100rpx auto;
		border-radius: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: rgb(0, 211, 109);
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		color: white;
	}
</style>